<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>党建地图</title>
    <meta name="keywords" content="党建地图" />
    <meta name="description" content="党建地图" />
    <link href="/static/css/party/style.css" rel="stylesheet" type="text/css">
    <link href="/static/js/party/myfocus/js/mf-pattern/mF_classicHC.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/static/webjars/layui/css/layui.css"  media="all">
    <script type="application/javascript" src="/static/webjars/layui/layui.all.js"></script>
    <script type="application/javascript" src="/static/js/jquery.min.js"></script>


    <link href="/static/css/party/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/css/party/common.css" rel="stylesheet" type="text/css">
    <link href="/static/css/party/common2018.css.css" rel="stylesheet" type="text/css">
    <link href="/static/css/party/iconfont.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/static/css/party/foot.css"/>
    <link href="/static/css/party/font-awesome.min.css" rel="stylesheet" type="text/css">
    <script type="application/javascript" src="/static/js/party/template-web.js"></script>
    <script type="application/javascript" src="/static/js/party/template-web-extends.js"></script>
    <script type="application/javascript" src="/static/js/party/boorstap.min.js"></script>
    <script type="application/javascript" src="/static/js/party/common.js"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=cOtTydbKqZG2r1XaH49gtl34hKQ3VczY"></script>

    <style type="text/css">
        body{
            background-color: #DEEAEA;
        }
        .anchorBL{
            display:none;
        }



        @media screen and (min-width:500px) and (max-width:1367px){
            #dangzuzhixinxi{
                position: absolute;
                top: 80%;
                left: 20%;
                z-index: 99;
                width: 60%;
                height: 350px;
                display: none;
            }
        }

        @media screen and (min-width:1800px) and (max-width:2300px){
            #dangzuzhixinxi{
                position: absolute;
                top: 40%;
                left: 20%;
                z-index: 99;
                width: 60%;
                height: 500px;
                display: none;
            }
        }


    </style>
</head>
<body>
<div class="padlogo w1200 mt50">
    <div class="danghui fl ml25"><img src="/static/images/party/img/danghui.gif"/></div>
    <div class="logo fl ml20 mt8"><img src="/static/images/party/img/logo.png"/></div>
    <div class="slogo fr"><embed src="/static/images/party/img/donghua.swf" width="600" height="150" wmode="transparent" /></div>
    <div class="clear"></div>
</div>

<div class="w1000 mt60" >
    <ul class="nav" style="text-align: center" id="dingbu">
        <li class="bg2">&nbsp;</li>
        <li class="bg2" style="width: 143px;" party-src="/party/home/index"><a href="javascript:;">首页</a></li>
        <li class="bg2" style="width: 143px" party-src="/party/home/news"><a href="javascript:;">新闻资讯</a></li>
        <li class="bg2" style="width: 143px" party-src="/party/home/education"><a href="javascript:;">教育培训</a></li>
        <li class="bg2" style="width: 143px" party-src="/party/home/service"><a href="javascript:;">服务大厅</a></li>
        <li class="bg2" style="width: 143px" party-src="/party/home/map"><a href="javascript:;">党建地图</a></li>
        <li class="bg2" style="width: 143px"><a href="/party/home/admin" target="_blank">后台管理</a></li>

        <%--<li class="bg2"><a href='/views/party/fore/index1.jsp' target='_blank'>后台管理</a></li>--%>
    </ul>

</div>
<div class='nav_bg w1000 mt30'><img src='/static/images/party/img/nav_bg.png' class='tcenter'/></div>

<div class="clearfix"></div>
<div class="container">
    <div style="width: 100%;height: 100%;" id="body">
        <div style="display:inline-block;width: 10%;">
            &nbsp;
        </div>

        <div style="display:inline-block;width: 80%;">
            <div style="height: 100px;width: 100%;line-height: 100px;">
                <div style="float: left;width: 50%;height: 100px;">
                    <img src="/static/images/party/img/map-icon01.png" />
                    <span style="font-size: 18px;">党建地图</span>
                </div>

                <div style="float: right;width: 50%;height: 100px;text-align: right;">
                    <input style="height: 30px" type="text" />

                    <span style="font-size: 18px;">搜索</span>
                </div>

            </div>
            <hr style="height:3px;border:none;border-top:3px double #DC3721;" />

            <div id="allmap" style="height: 670px;width: 100%;background-color: #4476A7;">

            </div>

        </div>

        <div style="display:inline-block;width: 10%;">
            &nbsp;
        </div>


    </div>
    <div id="dangzuzhixinxi">
        <blockquote class="layui-elem-quote layui-text" style="height: 49px;background-color: white;color: red;font-size: large;">
            <div style="float: left;">兴文县党组织</div>
            <div class="layui-btn layui-btn-radius layui-btn-danger layui-btn-sm" style="float: right;margin: 0px;" onclick="hideDangzuzhi();">
                关闭
            </div>
        </blockquote>

        <div class="layui-tab layui-tab-card" style="margin:0px;padding:0px;background-color: #e2e2e2;">
            <ul class="layui-tab-title">
                <li class="layui-this">组织信息</li>
                <li>组织动态</li>
                <li>组织留言</li>
                <li>全景预览</li>
                <li onclick="kaishidaohang(end)">开始导航</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <ul style="margin-top:10px;margin-left:10px">
                        <li style="margin: 5px;">组织名称：<label class="map_label" id="UnitName" style="border-bottom-style: dashed;border-bottom-color:red;">中共兴文县水务局委员会</label></li>
                        <li style="margin: 5px;">上级组织：<label class="map_label" id="UnitParentName" style="border-bottom-style: dashed;border-bottom-color:red;">中共兴文县委</label></li>
                        <li style="margin: 5px;">所在地址：<label class="map_label" id="UnitAddr" style="border-bottom-style: dashed;border-bottom-color:red;">四川省宜宾市兴文县盐井街4</label></li>
                        <li style="margin: 5px;">联系电话：<label class="map_label" id="UnitTel" style="border-bottom-style: dashed;border-bottom-color:red;">182****1381</label></li>
                    </ul>
                </div>
                <style>
                    .dynamic .col-xs-6 {
                        height: 100px;
                        padding-left: 0;
                        padding-right: 0;
                        background: #f7f7f7;
                        text-align: center;
                        width: 48%;
                        margin-right: 2%;
                        border-radius: 10px;
                        margin-bottom: 2%;
                        color: #fff;
                        position: relative;
                    }
                    .dynamic .col-xs-6 i {
                        width: 64px;
                        height: 64px;
                        display: inline-block;
                        position: absolute;
                        top: 20px;
                        left: 60px;
                    }
                    .icon3 {
                        background: url(/static/images/party/img/a3.png) no-repeat;
                        background-size: 100% 100%;
                    }

                    .icon2 {
                        background: url(/static/images/party/img/a2.png) no-repeat;
                        background-size: 100% 100%;
                    }

                    .icon1 {
                        background: url(/static/images/party/img/a1.png) no-repeat;
                        background-size: 100% 100%;
                    }

                    .icon4 {
                        background: url(/static/images/party/img/a4.png) no-repeat;
                        background-size: 100% 100%;
                    }

                    .icon5 {
                        background: url(/static/images/party/img/a5.png) no-repeat;
                        background-size: 100% 100%;
                    }

                    .icon6 {
                        background: url(/static/images/party/img/a6.png) no-repeat;
                        background-size: 100% 100%;
                    }

                    .icon7 {
                        background: url(/static/images/party/img/a7.png) no-repeat;
                        background-size: 100% 100%;
                    }

                    .icon8 {
                        background: url(/static/images/party/img/a8.png) no-repeat;
                        background-size: 100% 100%;
                    }

                    .dynamic .col-xs-6 p:nth-child(odd) {
                        margin: 0;
                        font-size: 16px;
                        margin: 0px 0 0 145px;
                    }
                    .dynamic .col-xs-6 p {
                        padding-right: 10px;
                        font-size: 24px;
                        margin: 20px 0 0 145px;
                        text-align: left;
                    }


                </style>
                <div class="layui-tab-item">
                    <div class="dynamic">
                        <div class="row">
                            <div class="col-xs-6" style="background: #f68484"><i class="icon1"></i><p id="unitCountSum">52</p><p>党组织数量</p></div>
                            <div class="col-xs-6" style="background: #67a1d4"><i class="icon2"></i><p id="DYuserSum">25</p><p>党员数量</p></div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6" style="background: #44b6ae"><i class="icon3"></i><p id="sumUnitPeriodsCount">25</p><p>线下集中培训开展次数</p></div>
                            <div class="col-xs-6" style="background: #dfbb4c"><i class="icon4"></i><p id="joinedScale">25</p><p>学员参学率</p></div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6" style="background: #5ab1da"><i class="icon5"></i><p id="ZSDYjoinedScale">25</p><p>正式党员参学率</p></div>
                            <div class="col-xs-6" style="background: #74d197"><i class="icon6"></i><p id="ZSDYstandardScale">25</p><p>正式党员达标率</p></div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6" style="background: #e7a156"><i class="icon7"></i><p id="YBDYjoinedScale">25</p><p>预备党员参学率</p></div>
                            <div class="col-xs-6" style="background: #5f9bb7"><i class="icon8"></i><p id="YBDYstandardScale">25</p><p>预备党员达标率</p></div>
                        </div>
                    </div>

                </div>

                <div class="layui-tab-item">
                    3
                </div>

                <div class="layui-tab-item">
                    <div id="quanjingtu" style="width: 100%; height: 400px;"></div>
                </div>

                <div class="layui-tab-item">
                    <div id="kaishidaohang" style="width: 100%; height: 400px;"></div>
                </div>
            </div>
        </div>
    </div>

</div>
<div id="ft" class="clearfix">
    <div class="ft-center">
        <span>智慧兴文公共信息平台:&nbsp;</span>
        <a>All Rights Reserved.&nbsp;&nbsp;</a>
        <span>版权所有:&nbsp;</span>
        <a href="http://www.ituohui.com/" target="_blank">四川省数聚汇智科技有限公司</a>
    </div>
</div>


<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //…
    });
</script>


</body>
</html>

<script type="text/javascript">
    //百度地图API功能
    var map = new BMap.Map("allmap");  // 创建Map实例
    map.addTileLayer(new BMap.PanoramaCoverageLayer());
    var end;

    var layer = layui.layer;
    //初始化
    function init() {
//		var point = new BMap.Point(116.404, 39.915); // 创建点坐标
        map.centerAndZoom("兴文县",15);
        map.enableScrollWheelZoom();                 //启用滚轮放大缩小
//		var mapStyle={  style : "mapbox" }
//		map.setMapStyle(mapStyle);
        // 隐藏logo


        var point1 = new BMap.Point(105.238511,28.303847);
        addMarker(point1, 1);

        var point2 = new BMap.Point(105.059346,28.236704);
        addMarker(point2, 2);

        var point3 = new BMap.Point(105.103812,28.340605);
        addMarker(point3, 3);

        var point4 = new BMap.Point(105.254404,28.362428);
        addMarker(point4, 4);

        var point5 = new BMap.Point(105.168005,28.132756);
        addMarker(point5, 5);

        point5 = new BMap.Point(105.061035,28.430602);
        addMarker(point5, 6);

        point5 = new BMap.Point(104.930151,28.207541);
        addMarker(point5, 7);

        point5 = new BMap.Point(104.947686,28.2501);
        addMarker(point5, 8);

        point5 = new BMap.Point(105.164052,28.181761);
        addMarker(point5, 9);

        point5 = new BMap.Point(105.148907,28.413654);
        addMarker(point5, 10);

        point5 = new BMap.Point(105.039329,28.205021);
        addMarker(point5, 11);

        point5 = new BMap.Point(104.983313,28.248924);
        addMarker(point5, 12);

        point5 = new BMap.Point(104.996123,28.214688);
        addMarker(point5, 13);

        point5 = new BMap.Point(105.012466,28.208577);
        addMarker(point5, 14);

        point5 = new BMap.Point(105.036565,28.204748);
        addMarker(point5, 15);

        point5 = new BMap.Point(105.002541,28.234781);
        addMarker(point5, 16);

        point5 = new BMap.Point(105.074448,28.17361);
        addMarker(point5, 17);

        point5 = new BMap.Point(105.083236,28.218392);
        addMarker(point5, 18);

        point5 = new BMap.Point(105.060583,28.235404);
        addMarker(point5, 19);

        point5 = new BMap.Point(105.103588,28.34316);
        addMarker(point5, 20);

    }

    //标注
    function addMarker(point, index){  // 创建图标对象
        var myIcon = new BMap.Icon("/static/images/party/img/map-icon02.png", new BMap.Size(30, 30), {
            // 指定定位位置。
            // 当标注显示在地图上时，其所指向的地理位置距离图标左上
            // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
            // 图标中央下端的尖角位置。
            anchor: new BMap.Size(15, 30),
            // 设置图片偏移。
            // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
            // 需要指定大图的偏移位置，此做法与css sprites技术类似。
            imageOffset: new BMap.Size(0, 0 - index * 0)   // 设置图片偏移
        });
        // 创建标注对象并添加到地图
        var marker = new BMap.Marker(point, {icon: myIcon});
        marker.addEventListener('click',function(){


            $("#dangzuzhixinxi").show();

            //备用方案 layui弹窗
            // layer.open({
            //     type:1,
            //     content:$('#dangzuzhixinxi').html(),
            //     area:('500px','500px')
            // })

            quanjingtu(120.320032, 31.589666);
            end = point;
        });
        map.addOverlay(marker);
    }
    //定位
    function getPointNow(){
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
            }
            else {
                map.panTo(new BMap.Point(105.238511,28.303847));
            }
        },{
            enableHighAccuracy: true
        });
    }


    init();

    //隐藏
    function hideDangzuzhi(){
        $("#dangzuzhixinxi").hide();
    }

    //全景图预览
    function quanjingtu(x,y){
        var panorama = new BMap.Panorama('quanjingtu');
        panorama.setPov({heading: -40, pitch: 6});
        panorama.setPosition(new BMap.Point(x, y)); //根据经纬度坐标展示全景图
    }

    //开始导航
    function kaishidaohang(end){
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    var start = new BMap.Point(r.point.lng, r.point.lat);
                    var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
                    driving.search(start, end);
                }
                else {
                    alert("获取当前位置失败");
                    return;
                }
            },
            {
                enableHighAccuracy: true
            });
        hideDangzuzhi();
    }
</script>

<script type="application/javascript">
    $("li[party-src]").click(function(){
        var that = $(this);
        var src = that.attr("party-src");
        window.location.href = src;
    });





    var aaaa = ' <div id="dangzuzhixinxi" style="position:absolute;top:25%;left:20%;z-index:99;width: 60%; height: 350px;display: none;">\n' +
        '        <blockquote class="layui-elem-quote layui-text" style="height: 24px;background-color: white;color: red;font-size: large;">\n' +
        '            <div style="float: left;">兴文县党组织</div>\n' +
        '            <div class="layui-btn layui-btn-radius layui-btn-danger layui-btn-sm" style="float: right;margin: 0px;" onclick="hideDangzuzhi();">\n' +
        '                关闭\n' +
        '            </div>\n' +
        '        </blockquote>\n' +
        '\n' +
        '        <div class="layui-tab layui-tab-card" style="margin:0px;padding:0px;background-color: #e2e2e2;">\n' +
        '            <ul class="layui-tab-title">\n' +
        '                <li class="layui-this">组织信息</li>\n' +
        '                <li>组织动态</li>\n' +
        '                <li>组织留言</li>\n' +
        '                <li>全景预览</li>\n' +
        '                <li onclick="kaishidaohang(end)">开始导航</li>\n' +
        '            </ul>\n' +
        '            <div class="layui-tab-content">\n' +
        '                <div class="layui-tab-item layui-show">\n' +
        '                    <ul style="margin-top:10px;margin-left:10px">\n' +
        '                        <li style="margin: 5px;">组织名称：<label class="map_label" id="UnitName" style="border-bottom-style: dashed;border-bottom-color:red;">中共兴文县水务局委员会</label></li>\n' +
        '                        <li style="margin: 5px;">上级组织：<label class="map_label" id="UnitParentName" style="border-bottom-style: dashed;border-bottom-color:red;">中共兴文县委</label></li>\n' +
        '                        <li style="margin: 5px;">所在地址：<label class="map_label" id="UnitAddr" style="border-bottom-style: dashed;border-bottom-color:red;">四川省宜宾市兴文县盐井街4</label></li>\n' +
        '                        <li style="margin: 5px;">联系电话：<label class="map_label" id="UnitTel" style="border-bottom-style: dashed;border-bottom-color:red;">182****1381</label></li>\n' +
        '                    </ul>\n' +
        '                </div>\n' +
        '\n' +
        '                <div class="layui-tab-item">\n' +
        '                    2\n' +
        '                </div>\n' +
        '\n' +
        '                <div class="layui-tab-item">\n' +
        '                    3\n' +
        '                </div>\n' +
        '\n' +
        '                <div class="layui-tab-item">\n' +
        '                    <div id="quanjingtu" style="width: 100%; height: 400px;"></div>\n' +
        '                </div>\n' +
        '\n' +
        '                <div class="layui-tab-item">\n' +
        '                    <div id="kaishidaohang" style="width: 100%; height: 400px;"></div>\n' +
        '                </div>\n' +
        '            </div>\n' +
        '        </div>\n' +
        '    </div>';
</script>
